<template>
  <div class="date-picker-bg">
    <div class="flex-box">
      <a-date-picker
        v-model:value="beginTime"
        :bordered="false"
        placeholder="开始日期"
        :allow-clear="false"
        @change="beginTimeValueChange"
      >
        <template #suffixIcon> </template>
      </a-date-picker>
    </div>

    <span class="line"></span>
    <div class="flex-box">
      <a-date-picker
        v-model:value="endTime"
        :bordered="false"
        placeholder="结束日期"
        :allow-clear="false"
        @change="endTimeValueChange"
      >
        <template #suffixIcon> </template>
      </a-date-picker>
    </div>

    <svg-icon icon-class="icon_select_date" class-name="icon-select-date"></svg-icon>
  </div>
</template>
<script setup>
import { message } from 'ant-design-vue';
import { ref, defineExpose, defineEmits } from 'vue';

const beginTime = ref('');
const endTime = ref('');
function cloneTime() {}
const emit = defineEmits(['changeBeginTime', 'changeEndTime']);

function beginTimeValueChange(newValue) {
  if (
    endTime.value > 0 &&
    parseInt(endTime.value / 1000 / 3600 / 24) < parseInt(beginTime.value / 1000 / 3600 / 24)
  ) {
    message.error('开始时间不能大于结束时间');
    beginTime.value = null;
    return;
  }
  emit('changeBeginTime', newValue / 1000 + '');
}
function endTimeValueChange(newValue) {
  if (
    beginTime.value > 0 &&
    parseInt(endTime.value / 1000 / 3600 / 24) < parseInt(beginTime.value / 1000 / 3600 / 24)
  ) {
    message.error('结束时间不能小于开始时间');
    endTime.value = null;
    return;
  }
  emit('changeEndTime', newValue / 1000 + '');
}
function resetTimes() {
  beginTime.value = '';
  endTime.value = '';
}

defineExpose({
  resetTimes
});
</script>
<style lang="less" scoped>
.date-picker-bg {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
  margin-right: 16px;
  width: 240px;
  border-radius: 4px;
  border: 1px solid rgba(186, 191, 197, 0.4);
  .flex-box {
    display: inline-block;
    margin-left: 2px;
    padding-left: 12px;
    width: 92px;
    overflow: hidden;
  }
  .line {
    margin: 0 4px 0 8px;
    width: 8px;
    height: 2px;
    background-color: rgba(186, 191, 197, 0.4);
  }
  .icon-select-date {
    width: 16px;
    height: 15px;
  }
  :deep(.ant-picker) {
    margin-right: 4px;
    padding: 0;
    width: 80px;
    border: 0;
    .ant-picker-input {
      width: 80px;
    }
  }
  :deep(.ant-picker-input input::-webkit-input-placeholder) {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.2) !important;
    line-height: 36px !important;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  }
}
/deep/ .ant-picker-input {
  width: 88px !important;
}
</style>
